<template>
  <div class="performance-chart">
    <div id="performance-chart" style="width: 100%; height: 300px;"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    onMounted(() => {
      const chartDom = document.getElementById('performance-chart');
      const myChart = echarts.init(chartDom);

      const xAxisData = Array.from({ length: props.data.length }, (_, i) => `第${i+1}次`);

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        series: [
          {
            data: props.data,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#2196F3'
            },
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#2196F3'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(33, 150, 243, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(33, 150, 243, 0.1)'
                }
              ])
            }
          }
        ]
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    });
  }
});
</script>

<style scoped>
.performance-chart {
  width: 100%;
  height: 300px;
  margin-bottom: 30px;
}
</style>
